<template>
  <el-card>
    <div class="filterRow">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-input
            v-model="formData.kw"
            class="my-2"
            :placeholder="$t('用户ID、投注ID、游戏ID搜索')"
            clearable
            style="width: 100%"
            @change="searchData"
          />
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="5" :xl="4">
          <el-date-picker
            class="my-2"
            style="max-width: 100%; min-width: 160px"
            v-model="formData.time"
            type="datetimerange"
            range-separator="-"
            :start-placeholder="$t('开始时间')"
            :end-placeholder="$t('结束时间')"
            @change="calendarChange"
            :default-time="pickerDefaultTime"
            clearable
          />
        </el-col>
        <el-col :span="3" :xl="2">
          <el-select
            class="my-2"
            v-model="formData.settle_status"
            :placeholder="$t('结算状态')"
            clearable
            @change="searchData"
          >
            <el-option label="未结算" value="0" />
            <el-option label="已结算" value="1" />
          </el-select>
        </el-col>
        <el-col :span="3" :xl="2">
          <el-select
            class="my-2"
            v-model="formData.result"
            :placeholder="$t('盈亏状态')"
            clearable
            @change="searchData"
          >
            <el-option label="win" value="win" />
            <el-option label="lose" value="lose" />
          </el-select>
        </el-col>
        <el-col :span="2" :xl="2">
          <el-button class="my-2" type="primary" @click="searchData">
            {{ $t("查询") }}
          </el-button>
        </el-col>
      </el-row>
    </div>
    <el-table :data="walletOrderList" v-loading="loading">
      <el-table-column
        align="center"
        prop="bet_id"
        :label="$t('投注ID')"
        width="200"
      />
      <el-table-column
        align="center"
        prop="uid"
        :label="$t('用户ID')"
        width="150"
      />
      <el-table-column
        align="center"
        prop="account_name"
        :label="$t('用户账号')"
        width="200"
      />
      <el-table-column align="center" prop="game_code" :label="$t('游戏ID')" />
      <el-table-column
        align="center"
        prop="bet_time"
        :label="$t('投注时间')"
        width="180"
      >
        <template #default="scope">
          {{ dayjs(scope.row.bet_time).format("YYYY-MM-DD HH:mm:ss") }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="settled_time"
        :label="$t('结算时间')"
        width="180"
      >
        <template #default="scope">
          {{ dayjs(scope.row.settled_time).format("YYYY-MM-DD HH:mm:ss") }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="is_settled" :label="$t('结算状态')">
        <template #default="scope">
          <span>{{ scope.row.is_settled ? t("已结算") : t("未结算") }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="bet_amount"
        :label="$t('投注金额')"
      />
      <el-table-column
        align="center"
        prop="win_amount"
        :label="$t('赢取金额')"
      />
      <el-table-column align="center" prop="win_loss" :label="$t('盈亏')">
        <template #default="scope">
          <span
            :class="scope.row.result == 'win' ? 'text-success' : 'text-danger'"
            >{{ scope.row.win_loss }}</span
          >
        </template>
      </el-table-column>
      <el-table-column align="center" prop="coin_name" :label="$t('币种')" />
      <el-table-column align="center" prop="result" :label="$t('盈亏状态')">
        <template #default="scope">
          <span
            :class="scope.row.result == 'win' ? 'text-success' : 'text-danger'"
            >{{ scope.row.result }}</span
          >
        </template>
      </el-table-column>
      <el-table-column align="center" prop="log_status" :label="$t('记录状态')">
        <template #default="scope">
          <span v-if="scope.row.log_status == 0">--</span>
          <span v-if="scope.row.log_status == 1">{{ t("有效") }}</span>
          <span v-if="scope.row.log_status == 2">{{ t("无效") }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="log_result" :label="$t('记录说明')" />
    </el-table>

    <div class="flex justify-center mt-5">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageable.total"
        v-model:page-size="pageable.pageSize"
        v-model:current-page="pageable.pageNum"
        :page-sizes="[5, 10, 25, 50, 100]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-card>
  <Detail
    :show="isShowOrderDetail"
    :bill_no="currentBillNo"
    @close="clearBillNo"
  />
</template>
<script setup>
import { ref, reactive, computed } from "vue";
import { useI18n } from "vue-i18n";
import { dayjs } from "element-plus";
import { getUserGameListApi } from "@/api/account/index";
import { pickerDefaultTime } from "@/utils/utils";
import Detail from "./detailDrawer.vue";
const { t } = useI18n();
const loading = ref(false);
const props = defineProps({
  uid: {
    type: Number,
    default: 0,
  },
});
const isShowOrderDetail = ref(false);
const currentBillNo = ref("");

// 分页
const pageable = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 0,
});
let query = reactive({
  page: pageable.pageNum,
  pagesize: pageable.pageSize,
  uid: props.uid,
});
const formData = reactive({
  kw: "",
  settle_status: "",
  time: [],
  result: "",
});

const walletOrderList = ref([]);
const getWalletBills = async (data) => {
  try {
    loading.value = true;
    let params = {
      ...query,
      ...data,
    };
    if (!params.uid) {
      delete params.uid;
    }
    console.log(params, "params");
    const { page, list } = await getUserGameListApi(params);
    walletOrderList.value = list;
    pageable.total = page.total_count;
    loading.value = false;
  } catch (e) {
    loading.value = false;
    return false;
  }
};
const handleCurrentChange = async (number) => {
  pageable.page = number;
  await getWalletBills();
};
// 条数
const handleSizeChange = (number) => {
  pageable.pageSize = number;
  getWalletBills();
};
getWalletBills();

const calendarChange = (e) => {
  formData.time = e;
  searchData();
};

//处理筛选的参数
const filterQuery = computed(() => {
  return {
    start:
      formData.time && formData.time[0]
        ? timestamp(formData.time[0].valueOf())
        : "",
    end:
      formData.time && formData.time[1]
        ? timestamp(formData.time[1].valueOf())
        : "",
    result: formData.result,
    settle_status: formData.settle_status,
    kw: formData.kw,
  };
});
const searchData = () => {
  query = { ...query, ...filterQuery.value };
  query = Object.fromEntries(
    Object.entries(query).filter(([key, value]) => {
      // 过滤空值
      return value !== "" && value !== null && value !== undefined;
    })
  );
  query.page = 1;
  getWalletBills(query);
};

const clearBillNo = () => {
  currentBillNo.value = "";
  isShowOrderDetail.value = false;
};
</script>
